<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebSocket聊天演示与WebRTC调用</title>
  <link href="/css/chat.css" rel="stylesheet">
</head>
<body>
  <p class="login">
    <input id="name" type="text" maxlength="12" required
      autocomplete="username" inputmode="verbatim" placeholder="输入用户名">
    <input type="button" name="login" value="登录" onclick="connect()">
    <div id="hint">输入昵称进入房间后点击用户名邀请视频通话</div>
  </p>
  <div class="container">
    <div class="chat">
      <div class="row01">
        <ul class="user-list" id="userlistbox"></ul>
        <div class="chat-box" id="chatbox"></div>
      </div>
      <div class="row">
        <div class="flexChild" id="empty-container"></div>
        <div class="flexChild" id="chat-controls-container">
          <input id="text" type="text" name="text" size="80" maxlength="256"
            placeholder="输入要发送的内容" autocomplete="off" onkeyup="handleKey(event)"
            disabled>
          <input type="button" id="send" name="send" value="发送"
            onclick="handleSendButton()" disabled>
        </div>
      </div>
    </div>
    <div class="video">
      <div class="camera-box" id="videToPeer">
        <video class="received-video" id="received_video" autoplay></video>
        <video class="local-video" id="local_video" autoplay muted></video>
        <button id="hangup-button" onclick="hangUpCall();" disabled>
          挂断电话
        </button>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/js/client.js"></script>
  <script src="/js/adapter.js"></script>
</body>
</html>
